/* flex box */

.m-flex,
.m-flex-show,
.m-flex-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
}

.m-flex-hide {
    display: none;
}


/* flex排列方式 */

.m-flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.m-flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.m-flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.m-flex-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}


/* flex容器内对齐方式 */

.m-flex-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.m-flex-middle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.m-flex-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.m-flex-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.m-flex-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.m-flex-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.m-flex-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.m-flex-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.m-flex-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.m-flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


/* flex栅格化 */

.m-flex-1,
.m-flex-fit {
    -webkit-box-flex: 1!important;
    -webkit-flex: 1!important;
    -ms-flex: 1!important;
    flex: 1!important;
}

.m-flex-2 {
    -webkit-box-flex: 2!important;
    -webkit-flex: 2!important;
    -ms-flex: 2!important;
    flex: 2!important;
}

.m-flex-3 {
    -webkit-box-flex: 3!important;
    -webkit-flex: 3!important;
    -ms-flex: 3!important;
    flex: 3!important;
}

.m-flex-4 {
    -webkit-box-flex: 4!important;
    -webkit-flex: 4!important;
    -ms-flex: 4!important;
    flex: 4!important;
}

.m-flex-5 {
    -webkit-box-flex: 5!important;
    -webkit-flex: 5!important;
    -ms-flex: 5!important;
    flex: 5!important;
}

.m-flex-6 {
    -webkit-box-flex: 6!important;
    -webkit-flex: 6!important;
    -ms-flex: 6!important;
    flex: 6!important;
}




[m-role='cell'],
[m-mode='x-equal'] {
    .m-flex;
}

[m-role='cell'] > *{
    -webkit-box-flex:0;
    -webkit-flex:none;
        -ms-flex:none;
            flex:none;
}

[m-mode='y'],
[m-mode='y-equal'] {
    .m-flex-column;
}

[m-role='cell'][m-mode='wrap']{
    .m-flex-wrap;
}

[m-talign='left'] {
    text-align: left;
}

[m-talign='center'] {
    text-align: center;
}

[m-talign='right']{
    text-align: right;
}

[m-valign='bottom']{
    .m-flex-bottom;
    .m-flex-left;
}

[m-valign='middle'] {
    .m-flex-middle;
    .m-flex-left;
}
[m-valign='top'] {
    .m-flex-top;
    .m-flex-left;
}

[m-valign='baseline']{
    .m-flex-baseline;
}

[m-align='center']{
    .m-flex-center;
    text-align: center;
}

[m-align='right']{
    .m-flex-right;
    text-align: right;
}

[m-align='left']
{
    .m-flex-left;
    text-align: left;
}


[m-valign='fit'] {
    .m-flex-stretch;
}

[m-layout='fit'] {
    .m-flex-1;
}

[m-layout='text'] {
    display: block !important;
    padding: 5px !important;
    line-height: 150%;
}

[m-layout='text'] p {
    text-indent: 2em;
    margin: 5px 0 5px 5px;
}

[m-mode='x-equal']>[m-role='cell'] {
    .m-flex-1;
}

[m-mode='y-equal']>[m-role='cell'] {
    .m-flex-1;
}

[m-mode='y'][m-valign='middle'], 
[m-mode='y-equal'][m-valign='middle'] {
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
}
[m-mode='y'][m-align='left'], 
[m-mode='y-equal'][m-align='left']{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}
[m-mode='y'][m-align='right'], 
[m-mode='y-equal'][m-align='right']{
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

[m-flex='1']{
    .m-flex-1;
}
[m-flex='2']{
    .m-flex-2;
}
[m-flex='3']{
    .m-flex-3;
}
[m-flex='4']{
    .m-flex-4;
}
[m-flex='5']{
    .m-flex-5;
}
[m-flex='6']{
    .m-flex-6;
}


